<div>
	<p>Create your own workflows here. Please make use of the given default workflows for reference purpose.</p>
	<div id="workflow-select-div"></div>
	<div id="workflow-test-div-data"></div>
		
	<div id="workflow-data-div">
		<div id="workflow-mgmt-title">&nbsp;</div>
		<hr />
		<div id="screen-div-parent2"></div>
		<div style="clear: both;">&nbsp;</div>

	</div>
	<div id="resultText">&nbsp;</div>
	<div>
		<button id="saveButton">Save</button>
		<button id="TestButton" >Test</button>
	</div>
</div>

<div id="dialog-form" title="Create a workflow">
	<p class="validateTips">All form fields are required.</p>

	<form>
		<fieldset>
			<label for="workflow-name-text">Name</label> <input type="text" name="name"
				id="workflow-name-text" class="text ui-widget-content ui-corner-all" />
		</fieldset>

	</form>
</div>

</div>
<script type="text/javascript">
function getHeadText(val,screen){

	var txt='<div class="droppable ui-widget-header" id="element '+screen+'">';
	txt=txt+'<p>Screen '+(screen+1)+'</p>';
	txt=txt+'<ul id="ul-screen-'+(screen+1)+'" key="'+(screen+1)+'" class="sortable boxy">';

	return txt;
};

function getTailText(){

	var txt='</ul></div>';
	return txt;
};

$(document).ready(function(){


	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 300,
		width: 600,
		modal: true,
		buttons: {
			"Create a workflow": function() {
				

				$(this).dialog("close"); 
			}
		},
		close: function() {
			$(this).dialog("close"); 
		}
	});

	
	 $.getJSON('index.php/welcome/workflow', function(data) {
			var text='<select id="workflow-dropdown"><option value=-1>--SELECT WORKFLOW--</option>';
			$.each(data,function(key,val){
				console.log(key);
				text=text+'<option value='+val["workflow_id"]+'>'+val["workflow_name"]+'</option>';
			});
			text=text+'<option value=0>--CREATE NEW WORKFLOW--</option></select>';

			$('#workflow-select-div').html(text);

			 $('#workflow-dropdown').change(function(){

					$('#workflow-test-div-data').html('');

				 if($(this).val() > 0 ){
						var dataString='&wfid='+$(this).val();
						var wfid=$(this).val();
						$.ajax({
							type: "POST",
								url: "index.php/welcome/test",
								data: dataString,
								dataType : 'json',
								success : function(data){
									console.log(data.error);
									 if(data.error == 1){
										 $('#workflow-mgmt-title').html('Workflow not present.');
									 }else{
									
									 $('#workflow-mgmt-title').html("<span key="+data['workflow_service_id']+">"+data['workflow_name']+"</span>");

									 $('#workflow-mgmt-title').attr("title",data['workflow_name']);
									 $('#workflow-mgmt-title').attr("key",data['workflow_service_id']);
									 
							 		 var screen=0;
							 		 htmltext='<div class="droppable2 ui-widget-header" id="element 0">';
							 		htmltext=htmltext+'<p>Unused services</p>';
							 		htmltext=htmltext+'<ul id="ul-screen-0" key="0" class="sortable boxy">';
							 		var list = document.getElementById("one");
							 		

							 		 htmltag=$('#screen-div-parent2');

							 	 	 
									 $.each(data['service_array'], function(key, val) {

								    	 if(screen == val['screen_position']){

											 htmltext=htmltext+'<li pkey='+val['ws_id']+' key='+val['service_id']+'>'+val['descr']+'</li>';
										 }else if( screen+1 == val['screen_position']){

											 //Add the tail
											 htmltext=htmltext+getTailText();
								
											 htmltext = htmltext + getHeadText(val,screen);
											 screen++;

											 htmltext=htmltext+'<li pkey='+val['ws_id']+' key='+val['service_id']+'>'+val['descr']+'</li>';
										 }
										 	
									 });
									 htmltag.html(htmltext);

									 $('#workflow-test-div').html('<a href="index.php/webservices/index/'+wfid+'" target="blank">Test Workflow</a>');


									 
									 var i=0;
									 for(i=0;i<=6;i++){
										 list = document.getElementById("ul-screen-"+i);
										 DragDrop.makeListContainer( list );
									 };
								}

								}
						});

					}else if($(this).val()== 0) {
							var text='<h3>Create a new workflow</h3><hr><p><label>Workflow Name</label>'
								+'<input type="text" id="workflow-name-input"/></p><button id="wfnameaddbtn">Add</button>';
							
							$( "#dialog-form" ).dialog( "open" );
					}

						
			 });
	 });

	 $('#saveButton').button().click(function(){

			console.log("Button clicked");
			var workFlowArray={};
			var servicesArray=new Array();
			$('ul.sortable').each(function(){
				var ulTag=$(this);
				
				var i=0;
				ulTag.children().each(function(){
					var service={};
					service['ws_id']=$(this).attr('pkey');
					service['service_id']=$(this).attr('key');
					service['descr']=$(this).html();
					service['screen_position']=ulTag.attr('key');
					service['screen_order']=i+1;
					servicesArray[$(this).attr('key')]=service;
					console.log($(this).attr('key')+"--"+$(this).html()+" :: "+ulTag.attr('key')+" :: "+(i+1));
					i++;
				});
			});

			
			workFlowArray['workflow_name']=$('#workflow-mgmt-title').attr("title");
			workFlowArray['workflow_service_id']=$('#workflow-mgmt-title').attr("key");
			workFlowArray['service_array']=servicesArray;
			console.log(JSON.stringify(workFlowArray));
			var dataString='&arrayString='+JSON.stringify(workFlowArray);

			$.ajax({
				type: "POST",
					url: "index.php/welcome/testPost",
					data: dataString,
					success : function(data){
						alert(data);
					}
			});
			
		});

	 $('#TestButton').button().click(function(){

		console.log("Button clicked");
	 });

});
</script>

<div style="clear: both;">&nbsp;</div>
